<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <style>
    body{
        background-color: rgb(233, 233, 229);
    }  
    #xian1{
        width: 300px;
        height: 1px;
        position: absolute;
        top: 8%;
        background-color: #d3d0d0;
    }
    #xian2{
        width: 300px;
        height: 1px;
        position: absolute;
        top: 27%;
        background-color: #d3d0d0;
    }
    #xian3{
        width: 800px;
        height: 1px;
        position: absolute;
        top: 15%;
        background-color: #d3d0d0;
    }
    .box1{
        position: absolute;
        top: 6%;
        left: 13%;
        height: 1000px;
        width: 300px;
        background-color: white;
    }
    #grzx{
        position: absolute;
        left: 5%;
        top: 2%;
        font-size: 19px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #282828;
    }
    #yhm{
        position: absolute;
        left: 30%;
        top: 10%;
        font-size: 17px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #282828; 
    }
    #zcsj{
        position: absolute;
        left: 18%;
        top: 20%;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #282828; 
    }
    #Tel{
        position: absolute;
        left: 8%;
        top: 30%;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #282828; 
    }
    #pw{
        position: absolute;
        left: 8%;
        top: 36%;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #282828; 
    }
    #xb{
        position: absolute;
        left: 8%;
        top: 42%;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #282828; 
    }
    #age{
        position: absolute;
        left: 8%;
        top: 48%;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #282828; 
    }
    #zy{
        position: absolute;
        left: 8%;
        top: 54%;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #282828; 
    }
    .box2{
        position: absolute;
        top: 6%;
        left: 33%;
        height: 450px;
        width: 800px;
        background-color: white;
    }
    .box3{
        position: absolute;
        top: 67%;
        left: 33%;
        height: 450px;
        width: 800px;
        background-color: white;
    }
    #bjzl{
        position: absolute;
        left: 4%;
        top: 3%;
        font-size: 19px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #282828;
    }
    .shuruk1{
        position: absolute;
        left: 4%;
        top: 20%;
        width: 700px;
        height: 33px;
    }
    .shuruk2{
        position: absolute;
        left: 4%;
        top: 30%;
        width: 700px;
        height: 33px;
    }
    .shuruk3{
        position: absolute;
        left: 4%;
        top: 41%;
        width: 700px;
        height: 33px;
    }
    .shuruk4{
        position: absolute;
        left: 4%;
        top: 53%;
        width: 700px;
        height: 33px;
    }
    .shuruk5{
        position: absolute;
        left: 4%;
        top: 65%;
        width: 700px;
        height: 33px;
    }
    #srt1{
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #282828;
        position: absolute;
        left: 0;
    }
    #tip00{
        position: absolute;
        left: 15%;
        width: 400px;
        height: 36px;
        background: #FBFBFB;
            border: 1px solid #C1C1C1;
            font-family: SimSun;
            font-weight: 400;
    }
    button{
        position: absolute;
        top: 80%;
        left: 55%;
        width: 100px;
        height: 40px;
        border: none;
        background-color: powderblue;
        border-radius: 10px;
    }
    #fxk{
        position: absolute;
        top: 83%;
        left: 15%;
        width: 20px;
        height: 20px;
        border: none;
    }
    #tongy{
        font-family: SimSun;
        font-weight: 400; 
        position: absolute;
        top: 80%;
        left: 19%;
        color: red;
    }
    #ygmp{
        position: absolute;
        top: 15%;
        left: 4%;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #282828;
    }
    table{
    position: absolute;
    top: 20%;
    left: 7%;
    width: 645px;
    border-collapse: collapse;
}
th,td{
    border: 1px solid #d4d4d4;
    text-align: center;
    padding: 20px 0;
}
#menp{
    width: 220px;
}
#jiag{
    width: 120px;
}

table tbody tr:nth-child(odd){
    background-color: #ffffff;
}
table tbody tr:hover{
    background-color: #ffffff;
}
  </style>

<div class="box1">
<p id="grzx">个人中心</p>
<div id="xian1"></div>
<p id="yhm">游客——Olivia</p>
<p id="zcsj">注册时间：2023/4/3&nbsp;9:40:23</p>
<div id="xian2"></div>
<p id="Tel">手机号：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;13568096942</p>
<p id="pw">密码：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;***********</p>
<p id="xb">性别：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;女</p>
<p id="age">年龄：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;27</p>
<p id="zy">职业：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;教师</p>

</div>
<div class="box2">
<p id="bjzl">编辑资料</p>
<div id="xian3"></div>
<div class="shuruk1"><p id="srt1">昵称：</p> <input type="text" id="tip00" placeholder="Olivia"></div>
<div class="shuruk2"><p id="srt1">性别：</p> <input type="text" id="tip00" placeholder="女"></div>
<div class="shuruk3"><p id="srt1">年龄：</p> <input type="text" id="tip00" placeholder="27"></div>
<div class="shuruk4"><p id="srt1">职业：</p> <input type="text" id="tip00" placeholder="教师"></div>
<div class="shuruk5"><p id="srt1">去过的地方：</p> <input type="text" id="tip00" ></div>
<button>提交</button> <input type="checkbox" id="fxk"> <P id="tongy">我同意《“景随心动”用户隐私协议》</P>
</div>

<div class="box3">
    <p id="bjzl">详细信息</p>
    <div id="xian3"></div>
    <table>
        <tbody>
            <tr><th id="menp">已购门票</th>  <th>购买时间</th> <th id="jiag">价格</th></tr>
            <tr><th id="menp">秦始皇陵博物院</th> <th>2023/3/27</th> <th id="jiag">120元</th> </tr>
            <tr><th id="menp">大唐芙蓉园</th> <th>2023/3/28</th> <th id="jiag">30元</th> </tr>
            <tr><th id="menp">蜀南竹海</th> <th>20234/5</th> <th id="jiag">150元</th> </tr>
        </tbody>
</div>
  <script>
      
  </script>
</body>
</html>